<!DOCTYPE html>
<html lang="en" xmlns:th="http:www.thymeleaf.org">

<head>
    <meta charset="utf-8"/>
    <title>登录</title>
    <link rel="stylesheet" href="/css/login.css" type="text/css">
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/vue.min.js"></script>
</head>

<body>
<div class="login-main">

    <form onsubmit="return fuc()" class="login-left layui-form" id="login_from" data-node="loginForm">

        <div class="row">
            <span id="one" class="login-type selected" data-type="netease">邮箱密码登录</span>
            <span class="login-type-split"></span>
            <span id="two" class="login-type" data-type="phone">邮箱验证码登录</span>
        </div>

        <div class="one">

            <div data-container="netease" class="login-container show">

                <div class="row text-row" data-node="accountInput">
                    <input type="text" v-model="certificate" name="certificate" id="login_email" placeholder="邮箱号"
                           data-node="loginUser" class="login-username text">
                </div>
                <div class="row text-row" data-node="passwordInput">
                    <input type="password" v-model="token" name="token" placeholder="密码" id="password"
                           data-node="loginPwd" class="login-password text">
                </div>
                <div class="row check-row" data-node="autoLoginRow">
                    <label class="login-label"><input data-node="loginAuto" type="CHECKBOX" class="login-checkbox"
                                                      checked="checked">自动登录</label>
                    <a class="login-nopassword" target="_blank" href="/login/pc_forget_passwordPage">忘记密码?</a>

                    <div class="login-error"></div>

                </div>
                <div class="row row-btn">
                    <button type="submit" @click="login" data-node="loginSubmit" class="login-btn btn" value="">登录
                    </button>
                    <a href="../register/pc_registerPage" target="_blank" data-node="loginRegist"
                       class="regist-btn btn">注册</a>
                </div>
            </div>

        </div>

        <div class="two">

            <div data-container="netease" class="login-container show">
                <div class="row text-row" data-node="accountInput">
                    <input type="text" name="certificate2" id="certificate" placeholder="邮箱号" data-node="loginUser"
                           class="login-username text">
                </div>
            </div>


            <div class="div2">
                <input type="tel" name="code" placeholder="请输入验证码" class="shouji"/>
                <input class="yanzhen" type="button" value="获取验证码"/>
            </div>

            <div class="div8">
                <input id="true" lay-submit lay-filter="true" class="tongyi" type="button" value="确认"/>
            </div>

        </div>


        <div data-container="phone" class="login-container" id="urs-phone-login">
        </div>

    </form>
    <div class="login-right">
        <h2>其他账号登录：</h2>
        <div>
            <a id="mayun_login" >
                <div class="email btn" data-oauth="/login/acc/login?app=web&product=YNOTE&tp=cqq&cf=6&fr=1"
                     data-track-event="qq">
                    <span class="icon-email"><img src="/img/123.png" class="mayun"/></span>使用码云登录
                </div>
            </a>
        </div>
    </div>
    <div class="login-middle"></div>
</div>

<div class="ft">
    <div class="ft-nav">
        <span><span id="copyright-year"></span> 网易公司</span>
        <a target="_blank" href="http:www.youdao.com/about/index.html">| 关于有道</a>
        <a target="_blank" href="http:a.youdao.com/">| 有道推广</a>
        <a target="_blank" href="http:note.youdao.com/iyoudao/">| 官方博客</a>
        <a target="_blank" href="http:techblog.youdao.com/">| 技术博客</a>
        <a target="_blank" href="http:campus.youdao.com/index.php?t1=index">| 诚聘英才</a>
    </div>
</div>
<script type="text/javascript" th:src="@{/js/layui/layui.js}"></script>
<script src="https:cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>

    localStorage.setItem("myUrl","http://338de254.cpolar.io");
    let myUrl = localStorage.getItem("myUrl");

    function fuc() {
        return false;
    }

    $(document).ready(function () {
        layui.use(['form'], function () {
            var $ = layui.$,
                form = layui.form;

            $("body").on("blur", "#login_email", function () {
                if (!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test($("#login_email").val())) {
                    layer.msg("邮箱格式不正确", {time: 1000});
                    $("#login_email").val('');
                    return false;
                }
            });

            $(".two").hide();
            $(".one").show();

            new Vue({
                el: '.one',
                data: {
                    certificate: null,
                    token: null,
                    msg: null
                },
                methods: {
                    login: function () {
                        var params = {
                            certificate: this.certificate,
                            token: this.token
                        }
                        var _this = this;
                        axios.post(myUrl+'/note-user/certificate/login', $.param(params))
                            .then(function (res) {
                                console.log(res);
                                if (res.data.rs) {
                                    sessionStorage.setItem("accessToken", res.data.msg);
                                    localStorage.setItem("Token", res.data.msg);
                                    location = "/indexPage"
                                } else {
                                    layer.msg(res.data.msg, {icon: 6, time: 1000, shade: 0.4}, function () {
                                    });
                                }
                            }).catch(function (error) {  //请求失败处理
                            console.log(error);
                        });
                    }
                }
            })

            /*邮箱密码登录*/
            $("#one").click(function () {
                /*$("#two").attr({"font-size":"18px" ,"font-weight":"500"});*/
                $("#one").addClass("login-type selected");
                $("#two").removeAttr("color");
                $("#two").removeClass("selected");
                $(".two").hide();
                $(".one").show();

            });

            /*邮箱验证码登录*/
            $("#two").click(function () {
                /*不能刷新当前页面  刷新后会到邮箱密码登录 */
                /*window.location.reload()*/
                $('.login-error').text("");
                $('#login_email').val('');
                $('#password').val('');

                $("#one").removeAttr("color");
                $("#one").removeClass("selected");
                $("#two").addClass("login-type selected");
                $(".one").hide();
                $(".two").show();
            })


            $("body").on("blur", "#certificate", function () {
                if (!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test($("#certificate").val())) {
                    layer.msg("请输入正确的邮箱");
                    $("#certificate").val('');
                    return false;
                }
            });

            form.on('submit(true)', function (data) {
                console.log(data.field);
                console.log(JSON.stringify(data.field));
                data.field.certificate = data.field.certificate2;
                data.field.token = data.field.code;

                $.ajax({
                    url: myUrl+"/note-user/certificate/login1",
                    type: 'post',
                    data: JSON.stringify(data.field),
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function (d) {
                        if (d.rs) {
                            console.log(123)
                            console.log(d.rs)
                            localStorage.setItem("Token",d.msg);
                            sessionStorage.setItem("accessToken", d.msg);
                            location = "/indexPage";
                        } else {
                            layer.msg(d.msg);
                        }
                    }
                });
                return false;
            });


            $("body").on("click", ".yanzhen", function () {
                var obj = this;
                $.ajax({
                    type: "get",
                    data: {
                        certificate: $("#certificate").val()
                    },
                    url: myUrl+"/note-user/certificate/getCode1",
                    dataType: "json", //返回的
                    success: function (data) {
                        if (data.rs) {
                            $(".yanzhen").addClass("layui-btn-disabled");
                            $('.yanzhen').attr('disabled', "true");
                            settime(obj);

                            console.log(data.msg)

                        } else {
                            layer.msg(data.msg);
                        }
                    },
                    error: function (msg) {
                        console.log(msg);
                    }
                });

                var countdown = 60;

                function settime(obj) {
                    if (countdown == 0) {
                        obj.removeAttribute("disabled");
                        obj.classList.remove("layui-btn-disabled")
                        obj.value = "获取验证码";
                        countdown = 60;
                        return;
                    } else {
                        obj.value = "重新发送(" + countdown + ")";
                        countdown--;
                    }
                    setTimeout(function () {
                        settime(obj)
                    }, 1000)
                }
            })

            /* 码云登录 */
           /*$("#mayun_login").click(function () {
               $.ajax({
                   url: "https://gitee.com/oauth/authorize?client_id=f82d6527cdd1ad05d522d3777edd64442415f93b99f35950ab8a96f77bfc18af&redirect_uri=http://av24yt.natappfree.cc/certificate/mayuntest&response_type=code",
                   type: 'get',
                   contentType: 'application/json',
                   dataType: 'json',
                   success: function(d) {
                       if(d.rs) {
                           layer.msg(d.msg);
                       } else {
                           layer.msg(d.msg);
                       }
                   }
               })
           })*/
            
            
        })

    });
</script>
</body>

</html>